{% extends 'base.html' %}
{% block title %}分类页{% endblock %}

{% block hero-body %}
	<nav class="container breadcrumb is-fluid1" aria-label="breadcrumbs">
		<ul>
			<li>
				<a href="/">
					<span class="icon is-small">
						<i class="mdi mdi-home" aria-hidden="true"></i>
					</span>
					<span>首页</span>
				</a>
			</li>
			<li class="is-active">
				<a href="{% url 'product:categories' %}">
					<span>全部分类</span>
				</a>
			</li>
		</ul>
	</nav>
{% endblock %}

{% block section %}
<div class="container mt-3 is-fluid1" id="category" v-cloak>
	<template>
		{% for cate in categories %}
		<section>
			<b-collapse class="card" animation="slide" aria-id="contentIdForA11y3">
				<template #trigger="props">
					<div class="card-header" role="button" aria-controls="contentIdForA11y3">
						<p class="card-header-title">
							{{ cate.name }}
						</p>
						<a class="card-header-icon">
							<b-icon :icon="props.open ? 'menu-down' : 'menu-up'">
							</b-icon>
						</a>
					</div>
				</template>
				<div class="card-content">
					<div class="content">
						<div class="columns">
							{% for sub_cate in cate.sub_cate.all %}
							<div class="column is-2">
								<div class=" has-text-centered">
									<a class="box" href="{% url 'product:category-detail' sub_cate.id %}">
										<img src="{{ MEDIA_URL }}{{ sub_cate.icon }}" width="96px" height="96px"
											alt="{{ sub_cate.name }}">
										<p class=" has-text-primary"> {{ sub_cate.name }}</p>
									</a>
								</div>
							</div>
							{% endfor %}
						</div>
					</div>
				</div>
			</b-collapse>

		</section>
		{% endfor %}
	</template>
</div>
{% endblock %}


{% block extrafoot %}{{ block.super }}
<script>
	var category = new Vue({
		el: "#category",
	});
</script>
{% endblock %}
	